<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container style="margin-top:100px;">
          <el-aside width="200px">
            <el-row>
              <el-button type="primary" round
                >分布式电源发电计划</el-button
              ></el-row
            >
            <el-row
              ><el-button type="success" round
                >储能充放电计划</el-button
              ></el-row
            >
            <el-row
              ><el-button type="info" round>负荷用电计划</el-button></el-row
            >
            <el-row
              ><el-button type="warning" round>人工输入</el-button></el-row
            >
            <el-row><el-button type="danger" round>自动生成</el-button></el-row>
          </el-aside>
          <el-main>
            <!-- <div id="table4"> -->
            <el-row>
              <el-tabs :tab-position="tabPosition" style="height: 800px;">
                <el-tab-pane label="分布式电源发电计划"
                  ><div id="plan"></div>
                </el-tab-pane>
                <el-tab-pane label="储能充放电计划">配置管理</el-tab-pane>
                <el-tab-pane label="负荷用电计划">角色管理</el-tab-pane>
              </el-tabs>
            </el-row>
            <!-- </div> -->
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
// import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '3',
      tabPosition: 'left',
      activeName: 'first'
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {},

  created() {},

  mounted() {
    let myChart = this.$echarts.init(document.getElementById('plan'))
    let option = {
      title: {
        text: '风力光伏发电预测',
        textStyle: {
          fontWeight: 'normal', //标题颜色
          color: '#FFFFFF'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        textStyle: {
          fontWeight: 'normal', //标题颜色
          color: '#FFFFFF'
        },
        data: [
          '风力发电实际电量',
          '风力发电预测电量',
          '光伏发电实际电量',
          '光伏发电预测电量'
        ]
      },

      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1
            }
          }
        }
      ],
      series: [
        {
          name: '风力发电实际电量',
          type: 'line',

          stack: '总量',
          areaStyle: {
            // color: '#fff'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '风力发电预测电量',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '光伏发电实际电量',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '光伏发电预测电量',
          type: 'line',
          stack: '总量',
          areaStyle: {},
          data: [320, 332, 301, 334, 390, 330, 320]
        }
      ]
    }
    myChart.setOption(option)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart.resize()
    })
  },

  methods: {
    changerow() {},
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#050D11;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background:#050D11;color:#FEFEFE;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang="scss">
.el-table__body tr:hover > td {
  background-color: #4797ed !important;
}
.el-tabs__item {
  padding: 0 20px;

  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
</style>
<style lang="scss" scoped>
#plan {
  width: 1200px;
  height: 600px;
  background-color: #050d11;
}
.el-aside {
  margin-left: 50px;
}
// 当鼠标移入table中的每一行时改变每一行的颜色

#table4 {
  margin-left: 100px;
  width: 100%;
  height: 800px;

  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.aside {
  margin-left: 20px;
  margin-top: 50px;
  height: 560px;
}
</style>
